<template>
  <section class="home">
    <div class="search-header">
      <router-link to="/location" class="location df-a">
        <i class="iconfont icon-location"></i>
        <span class="wes">福州市仓山区</span>
      </router-link>
      <router-link to="/search" class="search-header-content df-a">
        <i class="iconfont icon-search"></i><span>输入商品或关键词</span>
      </router-link>
    </div>
    <div class="section-banner">
      <mt-swipe :auto="6000">
        <mt-swipe-item><img src="../../assets/banner.png" alt=""></mt-swipe-item>
        <mt-swipe-item><img src="../../assets/banner.png" alt=""></mt-swipe-item>
        <mt-swipe-item><img src="../../assets/banner.png" alt=""></mt-swipe-item>
      </mt-swipe>
    </div>
    <sort-bar :options="options" :double-sort="doubleSort" @change="doubleSort = !doubleSort"></sort-bar>
    <!-- :bottomMethod="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" -->
    <section class="wrapper page-bottom" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <mt-loadmore ref="loadmore" :topDistance="50" :bottomDistance="50"
        :top-method="loadTop" @top-status-change="handleTopChange">
        <div class="prolist cf" :class="doubleSort ? 'dob-sort': 'full-sort'"
          v-infinite-scroll="loadBottom"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10">
          <div class="prolist-item cf" v-for="(item, index) in proList" :key="index" @click='pushToGoods'>
            <div class="img-wrap">
              <img :src="item.imgUrl" alt="">
            </div>
            <div class="info-wrap">
              <p class="title wes">{{item.name}}</p>
              <div class="tags">
                <a class="tag" v-for="tag in item.tags" :key="tag">{{tag}}</a>
              </div>
              <div class="price-inner">
                <span class="red"><span class="price">{{`￥`+item.price}}</span>元/盒</span>
                <span> (建议零售价)</span>
              </div>
            </div>
          </div>
        </div>
        <p v-show="loading" class="page-infinite-loading">
          Loading...
        </p>
        <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
          <span v-show="topStatus === 'loading'" style="font-size: .32rem;">Loading...</span>
        </div>
        <div slot="bottom" class="mint-loadmore-bottom">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'drop' }">↑</span>
          <span v-show="bottomStatus === 'loading'" style="font-size: .32rem;">
            Loading...
          </span>
        </div>
      </mt-loadmore>
    </section>
    <foot-bar ref="footer"></foot-bar>
  </section>
</template>

<script>
import FootBar from '@c/FootBar'
import SortBar from '@c/SortBar'

export default {
  name: 'home',
  data () {
    return {
      value: [],
      options: [{
        title: '用药品类',
        show: false,
        pick: '',
        list: ['不限', '感冒用药', '皮肤用药', '肠胃用药', '儿科用药', '妇科用药']
      }, {
        title: '综合排序',
        show: false,
        pick: '',
        list: ['综合排序', '离我最近', '近期购买', '好评优先', '销量最高']
      }, {
        title: '价格排序',
        show: false,
        pick: '',
        list: ['不限', '从低到高', '从高到底']
      }],
      // 列表
      loading: false,
      doubleSort: false,
      allLoaded: false,
      topStatus: '',
      bottomStatus: '',
      wrapperHeight: 0,
      proList: [
        {
          name: '三九/999 感冒灵颗粒1',
          imgUrl: require('../../assets/product_2.png'),
          tags: ['感冒', '发烧鼻热'],
          price: '39.9'
        }, {
          name: '三九/999 感冒灵颗粒2',
          imgUrl: require('../../assets/product_1.png'),
          tags: ['感冒', '发烧鼻热', '解热镇痛'],
          price: '39.9'
        }, {
          name: '三九/999 感冒灵颗粒3',
          imgUrl: require('../../assets/product_2.png'),
          tags: ['感冒', '发烧鼻热'],
          price: '39.9'
        }, {
          name: '三九/999 感冒灵颗粒4',
          imgUrl: require('../../assets/product_2.png'),
          tags: ['感冒', '发烧鼻热'],
          price: '39.9'
        }
      ]
    }
  },
  components: {
    FootBar, SortBar
  },
  methods: {
    loadTop () {
      setTimeout(() => {
        // let item = {
        //   name: '三九/999 感冒灵颗粒',
        //   imgUrl: require('../../assets/product_2.png'),
        //   tags: ['感冒', '发烧鼻热'],
        //   price: '39.9'
        // }
        // for (let i = 1; i <= 4; i++) {
        //   this.proList.unshift(item)
        // }
        this.proList = [
          {
            name: '三九/999 感冒灵颗粒1',
            imgUrl: require('../../assets/product_2.png'),
            tags: ['感冒', '发烧鼻热'],
            price: '39.9'
          }, {
            name: '三九/999 感冒灵颗粒2',
            imgUrl: require('../../assets/product_1.png'),
            tags: ['感冒', '发烧鼻热', '解热镇痛'],
            price: '39.9'
          }, {
            name: '三九/999 感冒灵颗粒3',
            imgUrl: require('../../assets/product_2.png'),
            tags: ['感冒', '发烧鼻热'],
            price: '39.9'
          }, {
            name: '三九/999 感冒灵颗粒4',
            imgUrl: require('../../assets/product_2.png'),
            tags: ['感冒', '发烧鼻热'],
            price: '39.9'
          }
        ]
        this.$refs.loadmore.onTopLoaded()
      }, 1500)
    },
    loadBottom () {
      this.loading = true
      setTimeout(() => {
        let item = {
          name: '三九/999 感冒灵颗粒',
          imgUrl: require('../../assets/product_2.png'),
          tags: ['感冒', '发烧鼻热'],
          price: '39.9'
        }
        if (this.proList.length < 20) {
          for (let i = 1; i <= 4; i++) {
            this.proList.push(item)
          }
        } else {
          this.allLoaded = true
        }
        this.loading = false
        // this.$refs.loadmore.onBottomLoaded()
      }, 2000)
    },
    handleTopChange (status) {
      this.topStatus = status
    },
    handleBottomChange (status) {
      this.bottomStatus = status
    },
    pushToGoods () {
      this.$router.push({ path: '/shop/:shopid' })
    }
  },
  mounted () {
    this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top
  }
}
</script>

<style lang="scss" scoped>
.search-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: .32rem;
  height: 1.173333rem;
  line-height: 1;
  padding: .266667rem;
  white-space: nowrap;
  z-index: 99;
  .location {
    height: .64rem;
    margin: 0 .133333rem;
    padding: 0 .2rem;
    color: #ffffff;
    background-color: #232323;
    border-radius: .266667rem;
    opacity: 0.8;
    i {
      font-size: 14px;
    }
    span {
      display: inline-block;
      max-width: 2rem;
      margin-left: .1rem;
    }
  }
  .search-header-content {
    flex: 1;
    margin: 0 .133333rem;
    height: 100%;
    color: #86888e;;
    padding-left: .3rem;
    background-color: #ffffff;
    border-radius: .266667rem;
    span {
      margin-left: .1rem;
    }
  }
}
.section-banner{
  position: relative;
  height: 6.666667rem;
  img {
    width: 100%;
    height: 100%;
  }
}

.wrapper {
  overflow: scroll;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.mint-loadmore-top, .mint-loadmore-bottom {
  span {
    display: inline-block;
    transition: .2s linear;
    vertical-align: middle;
    &.rotate {
      transform: rotate(180deg);
    }
  }
}
.prolist.full-sort {
  padding: 0 .266667rem;
  background-color: #ffffff;
  .prolist-item {
    padding: .266667rem .133333rem;
    border-bottom: 1px solid #c0d4fc;
    .img-wrap {
      float: left;
      width: 2.4rem;
      height: 2.4rem;
      img {
        border-radius: .2rem;
        width: 100%;
        height: 100%;
      }
    }
    .info-wrap {
      min-height: 2.4rem;
      padding-left: 2.666667rem;
      .title {
        font-size: .426667rem;
        line-height: 1.04rem;
        color: #101d37;
      }
      .tags{
        height: .586667rem;
        margin-left: -.08rem;
        margin-right: -.08rem;
        .tag{
          display: inline-block;
          vertical-align: top;
          font-size: .32rem;
          padding: 0.05rem .12rem;
          margin: .04rem .06rem;
          color: #3072f6;
          background-color: #eaf1fe;
        }
      }

      .price-inner {
        font-size: .32rem;
        line-height: .64rem;
        .price {
          font-size: .426667rem;
          margin-right: .106667rem;
        }
      }
    }
  }
}
.prolist.dob-sort {
  padding: 0 .266667rem;
  background-color: #ffffff;
  .prolist-item {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding: .266667rem .133333rem 0;
    .img-wrap {
      width: 4.466667rem;
      height: 4.466667rem;
      img {
        border-radius: .4rem;
        width: 100%;
        height: 100%;
      }
    }
    .info-wrap {
      height: 2.133333rem;
      padding-bottom: .266667rem;
      border-bottom: 1px solid #c0d4fc;
      .title {
        font-size: .373333rem;
        line-height: .906667rem;
        color: #101d37;
      }
      .tags{
        height: .586667rem;
        margin-left: -.08rem;
        margin-right: -.08rem;
        .tag{
          display: inline-block;
          vertical-align: top;
          font-size: .32rem;
          padding: 0.05rem .12rem;
          margin: .04rem .06rem;
          color: #3072f6;
          background-color: #eaf1fe;
        }
      }
      .price-inner {
        font-size: .32rem;
        line-height: .64rem;
        .price {
          font-size: .426667rem;
          margin-right: .106667rem;
        }
      }
    }
  }
}

.page-infinite-loading {
  text-align: center;
  font-size: .32rem;
  line-height: .64rem;
}
</style>
